<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<ul id="friend_list" class="mui-table-view">		
		</ul>
		
		<script src="js/mui.js"></script>
		<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			function goto_detail(id) {
				for (let item of app.friendList) {
					if (item.id == id) {
						mui.openWindow({
							url: "user_detail.html",
							extras: {
								u: item,
								from: "friend_list.html"
							}
						});
					}
				}
			}
			
			mui.init();
			mui.plusReady(function () {				
			    mui.ajax(app.serverAddress + '/u/friend_list?id=' + app.getGlobalUserInfo().id, {
			    	dataType:'json',//服务器返回json格式数据
			    	type:'get',//HTTP请求类型
			    	timeout:10000,//超时时间设置为10秒；
			    	success:function(data){
						window.app.friendList = data;
						app.saveFriendList(data);
						var html_code = "";
						for (let item of data) {
							html_code += '<li class="mui-table-view-cell mui-media">';
							html_code += '<a onclick="goto_detail(' + item.id  + ')" href="javascript:;">';
							html_code += '<img class="mui-media-object mui-pull-left" id=' + item.id + ' style="width: 40px; height: 40px; border-radius: 5px">';
							html_code += '<div class="mui-media-body">';
							html_code += '<p class="mui-ellipsis" style="line-height: 35px; font-size: 16px; color: black;">' + item.name + '</p>';
							html_code += '</div>';
							html_code += '</a>';
							html_code += '</li>';
						}
						
			    		var ele_friend_list = document.getElementById("friend_list");
						ele_friend_list.innerHTML = html_code;
						
						var eles = ele_friend_list.getElementsByTagName('img');
						for (let ele of eles) {
							fetch(app.imageServerAddress + '/' + ele.id + '.jpg_100x100?' + Math.random()).then(function (response) {
								if (response.ok) {
									return response.blob();
								}
								throw new Error('some error happened!');
							}).then(function (oBlob) {
								var reader = new FileReader();
								reader.onload = function () {
									plus.storage.setItem(ele.id, this.result);
									ele.src = this.result;
								}
								reader.readAsDataURL(oBlob);
							}).catch((err) => {
								console.log("ERROR:" + JSON.stringify(err));
							});
						}
			    	},
			    	error:function(xhr,type,errorThrown){
			    		
			    	}
			    });
			});
		</script>
	</body>

</html>
